<%--
  Created by IntelliJ IDEA.
  User: zhangzhengwei2006
  Date: 2024/1/21/0021
  Time: 11:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人中心</title>
    <script src="<%=request.getContextPath() %>/static/jq/jquery-3.3.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        button {
            background-color: transparent;
        }

        body {
            user-select: none;
        }

        .right-top {
            height: 55px;
            position: relative;
            background-color: rgb(109, 109, 109);
        }

        .right-top > .right-left {
            right: 20px;
            height: 55px;
            width: 150px;
            display: flex;
            position: absolute;
        }

        .right-top > .right-left > .name {
            width: 95px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .avatar {
            width: 55px;
            overflow: hidden;
            border-radius: 5px;
        }

        .avatar > img {
            width: 55px;
            height: 55px;
            margin-left: 0;
            margin-right: 0;
        }

        .gr {
            position: absolute;
            top: 65px;
            width: 70px;
            height: 100px;
            z-index: 9999;
            border-radius: 5px;
            background-color: #fff;
            box-shadow: #9b9b9b 0px 5px 12px -5px;
        }

        .sanj {
            position: absolute;
            right: 27px;
            top: 57px;
            z-index: 9999;
            width: 15px;
            height: 15px;
            background-color: #ffffff;
            transform: rotateZ(45deg);
        }

        .home-div-d {
            position: absolute;
            right: -8px;
            top: 0;
            height: 200px;
            width: 70px;
            display: none;
            z-index: 9999;
            /*background-color: aqua;*/
        }

        .avatar:hover .home-div-d {
            display: block;
        }

        .gr > div {
            margin-top: 17px;
            text-align: center;
        }

        .gr > div > button {
            color: #3e3d3d;
            background-color: transparent;
        }

        .gr > div > button:hover {
            cursor: pointer;
            /*background-color: #9b9b9b;*/
            color: #496ff3;
        }

        .bottom {
            width: 400px;
            height: 175px;
            margin: 50px auto;
            border-radius: 10px;
            box-shadow: #7e7c7c -3px 3px 16px -1px;
        }

        .bottom > div {
            display: flex;
            height: calc(175px / 2);
        }

        .bottom > div:not(.bottom>div:first-child) > div {
            height: 100%;
            width: calc(400px / 4);
        }

        .tx > img {
            width: 80px;
            height: 80px;
            margin: 5px;
            border-radius: 10px;
        }

        .bottomxs {
            display: flex;
            align-items: flex-end;
        }

        .centerxs {
            display: flex;
            align-items: center;
        }

        .button-div {
            width: 150px;
            height: 50px;
            display: flex;
            position: absolute;
            right: 568px;
            align-items: center;
            justify-content: space-between;
        }

        .button-u, .button-up {
            background-color: #098dee;
            width: calc(130px / 2);
            height: calc(50px / 2);
            margin: 0 5px 0 5px;
            border-radius: 5px;
            color: white;
        }

        .button-u:hover, .scbutton:hover, .limg:hover {
            cursor: pointer;
        }

        .u-data-div {
            display: flex;
            width: 300px;
            height: 200px;
            z-index: 9999;
            position: absolute;
            top: 99px;
            background-color: white;
            box-shadow: #7e7c7c -3px 3px 16px -1px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .u-data-div > label {
            margin-top: 10px;
        }

        .u-data-div > label > input {
            height: 20px;
            border-bottom: 1px #9b9b9b solid;
            margin-left: 10px;
        }

        .up-data-div {
            display: flex;
            width: 300px;
            height: 200px;
            z-index: 9999;
            position: absolute;
            top: 99px;
            background-color: white;
            box-shadow: #7e7c7c -3px 3px 16px -1px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .up-data-div > label {
            margin-top: 10px;
        }

        .up-data-div > label > input {
            height: 20px;
            border-bottom: 1px #9b9b9b solid;
            margin-left: 10px;
        }

        input:focus {
            outline: none;
        }

        .scbutton {
            width: 50px;
            height: 20px;
            margin-top: 10px;
            color: white;
            border-radius: 5px;
            background-color: #098dee;
        }

        .limg {
            width: 30px;
            height: 30px;
        }
    </style>
</head>
<body>
<div>
    <div class="right-top">
        <div style="width: 55px;height: 55px;float: left;display: flex;align-items: center;justify-content: center;">
            <img class="limg" src="<%=request.getContextPath()%>/img/左箭头.png" alt="">
        </div>
        <div class="right-left">
            <div class="name">
                    <span style="color:#FFF;">

                    </span>
            </div>
            <div class="avatar">
                <img src="" alt="">
                <div class="home-div-d">
                    <div class="sanj">
                    </div>
                    <div class="gr">
                        <div>
                            <button id="toPersonage">个人主页</button>
                        </div>
                        <div>
                            <button id="toButton">退出登录</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div>
            <div class="tx">
                <img src="" alt="">
            </div>
            <div class="button-div">
                <button class="button-u">修改信息</button>
                <button class="button-up">修改密码</button>
            </div>
            <span style="margin-left: 25px;" class="bottomxs">姓名:</span>
            <div class="name bottomxs"></div>
            <span style="margin-left: 25px;" class="bottomxs">性别:</span>
            <div class="xb bottomxs"></div>
            <span style="margin-left: 25px;" class="bottomxs">启用:</span>
            <div class="sf bottomxs"></div>
        </div>
        <div>
            <span class="centerxs" style="margin-left: 25px">电话:</span>
            <div class="dh centerxs"></div>
            <span class="centerxs" style="margin-left: 20px">邮箱:</span>
            <div class="yx centerxs"></div>
        </div>
    </div>
    <div class="u-div">
        <div class="u-data-div">
            <label class="nameu">
                <span>姓名:</span><input type="text" name="sname" value="">
            </label>
            <label class="xbu">
                <span>性别:</span><input type="text" name="sgender" value="">
            </label>
            <label class="dhu">
                <span>电话:</span><input type="text" name="telephone" value="">
            </label>
            <label class="yxu">
                <span>邮箱:</span><input type="text" name="mailbox" value="">
            </label>
            <div>
                <button class="save scbutton">保存</button>
                <button class="cancel scbutton" onclick="cancel()">取消</button>
            </div>
        </div>
    </div>
    <div class="up-div">
        <div class="up-data-div">
            <label class="nameu">
                <span>旧密码:</span><input type="text" name="theold" value="">
            </label>
            <label class="xbu">
                <span>新密码:</span><input type="text" name="newpas" value="">
            </label>
            <label class="dhu">
                <span>确认密码:</span><input type="text" name="verify" value="">
            </label>
            <div>
                <button class="psave scbutton">保存</button>
                <button class="cancel scbutton" onclick="pcancel()">取消</button>
            </div>
        </div>
    </div>
</div>

<script>
    let datas;
    let pasd;
    $(function () {
        let num = $('.bottom').css("margin-right");
        $('.button-div').css('right', $('.bottom').css("margin-right"));
        $('.u-data-div').css('right', parseInt(num) + 52);
        $('.up-data-div').css('right', parseInt(num) + 52);
        $(".right-top>.right-left>.name>span").text(sessionStorage.getItem("AdminName"));
        $(".right-top>.right-left>.avatar>img").attr("src", "<%=request.getContextPath()%>" + sessionStorage.getItem("avatar"));
        <%--$(".tx>img").attr("src", "<%=request.getContextPath()%>" + sessionStorage.getItem("avatar"));--%>
        $('.u-div').css("display", "none")
        $('.up-div').css("display", "none")
        init()
    })

    // 初始化
    function init() {
        $.ajax({
            async: true,
            url: '<%=request.getContextPath() %>/back/admin?ac=getAdmin',
            type: 'post',
            data: {'id': sessionStorage.getItem('id')},
            dataType: "json",
            success: function (data) {
                datas = data.data;
                let d = data.data;
                $(".tx>img").attr("src", "<%=request.getContextPath()%>" + d.avatar);
                $(".name").text(d.sname)
                if (d.sgender == 'm' || d.sgender == 'M') {
                    $(".xb").text('男');
                } else if (d.sgender == 'f' || d.sgender == 'F') {
                    $(".xb").text('女');
                }
                $('.dh').text(d.telephone);
                $('.yx').text(d.mailbox);
                if (d.enable == '0') {
                    $('.sf').text('启用');
                } else if (d.enable == '1') {
                    $('.sf').text('未启用');
                }
            }
        })
    }

    //保存信息
    $(".save").click(function () {
        let inp = $(".u-data-div>label>input");
        let udata = {
            "id": sessionStorage.getItem('id'),
            "sname": inp[0].value,
            "sgender": inp[1].value,
            "telephone": inp[2].value,
            "mailbox": inp[3].value
        }
        $.ajax({
            async: true,
            url: '<%=request.getContextPath() %>/back/admin?ac=updateAdmin',
            type: 'post',
            data: udata,
            dataType: "json",
            success: function (d) {
                alert(d.message);
                cancel();
                init();
            }
        })
    })

    $(".psave").click(function () {
        let inp = $(".up-data-div>label>input");
        if (inp[0].value != pasd) {
            alert("旧密码不匹配");
        } else {
            if (inp[1].value == inp[0].value) {
                alert("新密码与旧密码相同");
            } else {
                if (inp[1].value != inp[2].value) {
                    alert("两次密码不相同")
                } else {
                    $.ajax({
                        async: true,
                        url: '<%=request.getContextPath() %>/back/admin?ac=updatePassword',
                        type: 'post',
                        data: {'id': sessionStorage.getItem('id'), 'password': inp[1].value},
                        dataType: "json",
                        success: function (data) {
                            alert(data.message);
                            pcancel();
                            init();
                            //修改密码后重新登录
                            sessionStorage.removeItem("AdminName")
                            sessionStorage.removeItem("avatar")
                            $.ajax({
                                async: true,
                                url: '<%=request.getContextPath() %>/back/admin?ac=logout',
                                type: 'post',
                                success: function (data) {
                                    if (data) {
                                        location.href = "admin?ac=tologin"
                                    }
                                }
                            })
                        }
                    })
                }
            }
        }
    })

    // 修改密码
    $(".button-up").click(function () {
        $('.up-div').css("display", "block")
        $.ajax({
            async: true,
            url: '<%=request.getContextPath() %>/back/admin?ac=getPassword',
            type: 'post',
            data: {'id': sessionStorage.getItem('id')},
            dataType: "json",
            success: function (data) {
                pasd = data.obj
            }
        })
    })

    // 修改信息
    $(".button-u").click(function () {
        $('.u-div').css("display", "block")
        let inp = $(".u-data-div>label>input");
        inp[0].value = datas.sname;
        if (datas.sgender == 'm' || datas.sgender == 'M') {
            inp[1].value = "男";
        } else if (datas.sgender == 'f' || datas.sgender == 'F') {
            inp[1].value = "女";
        }
        inp[2].value = datas.telephone;
        inp[3].value = datas.mailbox;
    })


    // 关闭弹窗
    function cancel() {
        let inp = $(".u-data-div>label>input");
        inp[0].value = "";
        inp[1].value = "";
        inp[2].value = "";
        inp[3].value = "";
        $('.u-div').css("display", "none")
    }

    // 关闭弹窗
    function pcancel() {
        let inp = $(".up-data-div>label>input");
        inp[0].value = "";
        inp[1].value = "";
        inp[2].value = "";
        $('.up-div').css("display", "none")
    }

    // 退出登录
    $("#toButton").click(function () {
        sessionStorage.removeItem("AdminName")
        sessionStorage.removeItem("avatar")
        $.ajax({
            async: true,
            url: '<%=request.getContextPath() %>/back/admin?ac=logout',
            type: 'post',
            success: function (data) {
                if (data) {
                    location.href = "admin?ac=tologin"
                }
            }
        })
    })

    // 个人主页
    $("#toPersonage").click(function () {
        location.href = "admin?ac=toPersonage"
    })
    $(".limg").click(function (){
        location.href = "admin?ac=toIndex"
    })
</script>
</body>
</html>
